<template>
  <MyBread v-if="bread" />
  <div
    class="main-content-display"
    id="main-content-display"
    :style="bread ? commonStyle : noBreadStyle"
  >
    <slot></slot>
  </div>
</template>

<script setup>
defineProps({
  bread: {
    type: Boolean,
    default: true
  }
});
const commonStyle = {
  height: 'calc(100% - 46px)'
};
const noBreadStyle = {
  height: '100%'
};
</script>

<style lang="scss" scoped>
.main-content-display {
  background-color: var(--bg-color1);
  border-radius: 4px;
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 50px);
}
</style>
